<template>
  <div>
    <div style="height: 60px; background-color: #fff; display: flex; align-items: center; border-bottom: 1px solid #ddd">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 40px">
          <div style="font-weight: bold; font-size: 24px; margin-left: 5px; color: #F9B44C">博物馆系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;justify-content: center; ">
        <el-dropdown trigger="click">
      <span class="el-dropdown-link">
        <img :src="user.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" alt="" style="width: 40px; height: 40px; border-radius: 50%">
        <span class="name">{{ user.name || '未登录'}}</span>
      </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="viewProfile">个人信息</el-dropdown-item>
              <el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
              <el-dropdown-item @click="logout">退出系统</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div style="display: flex">
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu
            router
            style="border: none"
            :default-active="$route.path"
            :default-openeds="['/home', '2']"
        >
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="2" v-if="user.role === '管理员'">
            <template #title>
              <el-icon><User /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/head">
              <el-icon><Avatar /></el-icon>
              <span>负责人信息</span>
            </el-menu-item>
            <el-menu-item index="/collection">
              <el-icon><Box /></el-icon>
              <span>藏品信息</span>
            </el-menu-item>
            <el-menu-item index="/activity">
              <el-icon><Star /></el-icon>
              <span>展览活动信息</span>
            </el-menu-item>
            <el-menu-item index="/goods">
              <el-icon><Goods /></el-icon>
              <span>纪念品信息</span>
            </el-menu-item>
            <el-menu-item index="/museum">
              <el-icon><School /></el-icon>
              <span>博物馆信息</span>
            </el-menu-item>
            <el-menu-item index="/user" >
              <el-icon><UserFilled /></el-icon>
              <span>用户信息</span>
            </el-menu-item>
            <el-menu-item index="/order" >
              <el-icon><ShoppingCart /></el-icon>
              <span>订单信息</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu  v-if="user.role === '负责人' || user.role === '管理员'">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span>负责人</span>
            </template>
            <el-menu-item index="/job">
              <el-icon><Message /></el-icon>
              <span>工作信息</span>
            </el-menu-item>
            <el-menu-item index="/SelectWriteOff">
              <el-icon><Notebook /></el-icon>
              <span>票务核销</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/userCollection">
            <el-icon><School /></el-icon>
            <span>博物馆藏品</span>
          </el-menu-item>
          <el-menu-item index="/userActivity">
            <el-icon><Star /></el-icon>
            <span>展览活动</span>
          </el-menu-item>
          <el-menu-item index="/userGoods">
            <el-icon><Goods /></el-icon>
            <span>纪念品</span>
          </el-menu-item>
          <el-menu-item index="/shoppingCar">
            <el-icon><ShoppingCart /></el-icon>
            <span>订单</span>
          </el-menu-item>
<!--          <el-menu-item index="/userOrder">
            <el-icon><UserFilled/></el-icon>
            <span>订单信息</span>
          </el-menu-item>-->
          <el-menu-item index="login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>

<!--      主体区域-->
      <div style="flex: 1; width: 0; background-color: #f8f8ff; padding: 10px">
        <router-view @update:user="updateUser" />
      </div>
    </div>

  </div>
</template>

<script>

import ValidCode from "@/components/ValidCode.vue";
import {User, Lock, EditPen} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      user: JSON.parse(localStorage.getItem('honey-user') || '{}')
    }
  },

  methods:{
    updateUser(user) {      //获取子组件传来的user数据 更新user数据
      this.user = user;
      localStorage.setItem('honey-user', JSON.stringify(user));
    },
    logout() {
      localStorage.removeItem('honey-user')
      this.$router.push('/login')
    },
    clearLocalStorage() {
      localStorage.removeItem('honey-user');
      console.log('honey-user data cleared from localStorage');
    },
    viewProfile() {
      this.$router.push('/person')
    },
    changePassword() {
      this.$router.push('/password')
    }
  },
  created() {
    // 设置一个定时器，在2小时后清除localStorage中的数据
    setTimeout(this.clearLocalStorage, 7200000);
  }
}
</script>

<!--<script setup>import { useRoute, useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import ValidCode from "@/components/ValidCode.vue";
import {User, Lock, EditPen} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

const router = useRouter();
const route = useRoute();

const user = ref(JSON.parse(localStorage.getItem('honey-user')));

const logout = () => {
  localStorage.removeItem('honey-user');
  router.push('/login');
};
</script>-->

<style scoped>
.el-menu-item.is-active {
  background-color: #e0e4ff !important;
}
.el-menu-item:hover {
  background-color: #e9eeff !important;
  color: #1450aa;
}
.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border: 2px solid #ffffff; /* 添加白色边框 */
}

.name {
  margin-left: 10px; /* 增加图片和角色之间的间距 */
  font-size: 14px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  color: #333333; /* 设置字体颜色 */
  padding: 4px 8px; /* 添加内边距 */
  border-radius: 4px; /* 添加圆角 */
  margin-bottom: 10px; /* 增加与下边框的间距 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.role:hover {
  background-color: #e0e0e0; /* 鼠标悬停时改变背景颜色 */
}
/*:deep(th)  {
  color: #333;
}*/
</style>